<template>
  <div class="modify-information">
    <el-row>
      <el-col :span="24">
        <p class="head-title-style">基本信息</p>
      </el-col>
      <el-form ref="form"
               :rules="rules_modifyinformation"
               :model="form"
               :inline="true">
        <el-col :span="24"
                class="mid-box-style">
          <el-col :span="12"
                  id="col-12">
            <el-form-item class="head-pictrue"
                          label="头像"
                          prop="imageUrl"
                          label-width="80px">
              <div class="mid-img-box">
                <img :src="form.imageUrl"
                     alt=""
                     class="mid-img-style" />
              </div>
              <el-upload :show-file-list="false"
                         class="upload-demo"
                         action=""
                         accept=".png,jpg"
                         :http-request="addUploadPictrue"
                         :on-success="handleAvatarSuccess"
                         :on-preview="handlePreview"
                         :on-remove="handleRemove"
                         :before-remove="beforeRemove"
                         multiple
                         :on-exceed="handleExceed"
                         :file-list="fileList">
                <el-button class="mid-upload-style">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="真实姓名"
                          prop="usernamereal"
                          label-width="80px"
                          class="mid-realname-style">
              <el-input v-model="form.usernamereal"
                        style="width:100%;"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称"
                          prop="usernickname"
                          label-width="80px"
                          class="mid-realname-style">
              <el-input v-model="form.usernickname"
                        :disabled="true"
                        class="common-style"></el-input>
            </el-form-item>
            <el-form-item label="权限模板"
                          prop="usertype"
                          label-width="80px"
                          class="mid-realname-style">
              <el-input v-model="form.usertype"
                        :disabled="true"
                        class="common-style"></el-input>
            </el-form-item>
            <el-form-item label="岗位"
                          prop="categor"
                          label-width="80px"
                          class="mid-realname-style">
              <el-input v-model="form.categor"
                        style="width:100%;"></el-input>
            </el-form-item>
            <el-form-item class="login-password"
                          label="手机号"
                          prop="mobile"
                          label-width="80px"
                          id="mid-phone-style">
              <el-input v-model="form.mobile"
                        id="mid-phone-style"></el-input>
            </el-form-item>
            <el-col :sapn="24"
                    class="footer-box">
              <el-button @click="onback">取消</el-button>
              <el-button id="saveStyle"
                         :style="{'background':form.usernamereal==''?'#666666':'rgb(58, 142, 230)','color':'#ffffff'}"
                         @click="onsave('form')">保存</el-button>
            </el-col>
          </el-col>
        </el-col>
      </el-form>

    </el-row>
  </div>
</template>
<script>
import OSS from 'ali-oss'
import axios from 'axios'
import qs from 'qs'
import { personalCenterApi } from '@/services/PersonalCenter'
export default {
  data () {
    return {
      iops: 0,
      uuid: this.$route.query.uuid,
      image_Url: '',
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      form: {
        imageUrl: '',
        imageUrl_relative: '',
        usernamereal: '',
        categor: '',
        mobile: '',
        rvtPercentage: 0,
        pictrue_daxiao: '',
        usernickname: '',
        usertype: ''
      },
      rules_modifyinformation: {
        imageUrl: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
        usernamereal: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        categor: [{ required: true, message: '工种不能为空', trigger: 'blur' }],
        mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
        { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号不符合规则' }],
      },
      //fileList3: [],
      dialogFormVisible: false,
      //修改密码的formInline声明
      formInline: {
        oldpassword: '',
        newpassword: '',
        repeatpassword: ''
      },
      rules: {
        oldpassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
        newpassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        repeatpassword: [{ required: true, message: '重复密码不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //上传png和jpg格式图片
    addUploadPictrue (data) {
      var _this = this;
      var oss_region = new OSS({
        region: 'oss-cn-hangzhou',
        accessKeyId: this.util.decrypt(process.env.AES_OSS_ID),
        accessKeySecret: this.util.decrypt(process.env.AES_OSS_SECRET),
        bucket: _this.image_Url,
      });
      var c = new Date().getMonth() + parseInt(1);
      if (c >= 10) {

      } else {
        c = '0' + c;
      }
      var path = 'upload/images/admin_avatar/' + new Date().getFullYear() + c + new Date().getDate() + '/' + new Date().getTime() + Math.floor(Math.random() * 10) + data.file.name.substring(data.file.name.length - 4);

      oss_region.multipartUpload(path, data.file, {

      }).then((res) => {
        //图片路径
        if (res.res.requestUrls[0].indexOf("?") != -1) {
          _this.iops = res.res.requestUrls[0].indexOf("?");
          _this.form.imageUrl = res.res.requestUrls[0].substring(0, _this.iops);
        } else {
          _this.form.imageUrl = res.res.requestUrls[0];
        }
        _this.form.imageUrl_relative = (res.name).substr(7);
        _this.form.pictrue_daxiao = Math.round(data.file.size / 1024 / 1024) + 'M';
      }).catch((err) => {
        console.log(err)
      });
    },
    //图片上传事件
    handleRemove (file, fileList) {
    },
    handleAvatarSuccess (res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    handlePreview (file) {
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //取消
    onback () {
      this.$router.push({ path: 'myInformation', query: { uuid: this.uuid } });
    },
    //保存



    //uuid: this.uuid, 
    // avatar: this.form.imageUrl_relative, 
    // real_name: this.form.usernamereal, 
    // type_work: this.form.categor, 
    // mobile: this.form.mobile
    onsave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          personalCenterApi.updateUserInfo({
            data: {
              uuid: this.uuid,
              avatar: this.form.imageUrl_relative,
              real_name: this.form.usernamereal,
              type_work: this.form.categor,
              mobile: this.form.mobile
            }
          }).then((res) => {
            if (res.code != 1) {
              this.$message.error(res.msg)
            } else {
              this.$message({
                message: '操作成功!',
                type: 'success'
              });
              this.$router.push({ path: 'myInformation', query: { uuid: this.uuid } });
            }
          }).catch((error) => {
            console.log(error)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //获取用户信息
    getUserDataInfo () {
      personalCenterApi.getUserInfo({
        params: {
          uuid: this.uuid
        }
      }).then((res) => {
        this.form.imageUrl = res.data.avatar_url;
        this.form.imageUrl_relative = res.data.avatar;
        this.form.usernamereal = res.data.real_name;
        this.form.categor = res.data.type_work;
        this.form.mobile = res.data.mobile;
        this.form.usertype = res.data.group_name;
        this.form.usernickname = res.data.nickname;
      }).catch((error) => {
        console.log(error)
      })
    },
  },
  mounted () {
    //获取用户信息
    this.getUserDataInfo();
  },
  created () {
    //console.log('new Date().getTime()=',new Date().getDate());
    // if (location.hostname === 'localhost') {
    //   this.image_Url = 'dev-hibuilding-new'
    // } else if (location.hostname === 'dev_front.ihibuilding.cn') {
    //   this.image_Url = 'dev-hibuilding-new'
    // } else if (location.hostname === 'test_front.ihibuilding.cn') {
    //   this.image_Url = 'dev-hibuilding-new'
    // } else if (location.hostname === 'www.hibuilding.cn') {
    //   this.image_Url = 'hibuilding'
    // } else if (location.hostname === 'front.hibuilding.cn') {
    //   this.image_Url = 'hibuilding'
    // }
    if (location.hostname === 'localhost') {
      this.image_Url = 'dev-hibuilding-new'
    } else if (location.hostname.split('.')[1] === 'ihibuilding') {
      this.image_Url = 'dev-hibuilding-new'
    } else if (location.hostname.split('.')[1] === 'hibuilding') {
      this.image_Url = 'hibuilding'
    }
  }
}
</script>
    <style lang="scss" scoped>
.mid-img-box {
  width: 120px;
  height: 120px;
  float: left;
}
.mid-img-style {
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff;
  border-radius: 60px !important;
}
.modify-information {
  /deep/ .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 84% !important;
  }
  padding: 0 20px;
}
.mid-box-style {
  margin-top: 20px;
}
.mid-realname-style {
  width: 100% !important;
}
.mid-upload-style {
  float: left;
  margin-top: 80px;
  margin-left: 20px !important;
  color: #3a8ee6 !important;
  border-color: #3a8ee6 !important;
}
.head-title-style {
  font-size: 18px;
  font-family: SimSun;
  font-weight: 400;
  color: rgba(20, 65, 179, 1);
}
.head-pictrue {
  width: 100% !important;
  /deep/ .el-form-item__label {
    text-align: right !important;
    float: left;
    margin-top: 40px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: rgba(51, 51, 51, 1) !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 40px !important;
  }
}

#saveStyle {
  color: white !important;
  margin-left: 20px !important;
}
.footer-box {
  padding-top: 20px;
  width: 100% !important;
  text-align: center;
}
#mid-phone-style {
  width: 100% !important;
}
.login-password {
  .el-input-group__append button.el-button,
  .el-input-group__append div.el-select .el-input__inner,
  .el-input-group__append div.el-select:hover .el-input__inner,
  .el-input-group__prepend button.el-button,
  .el-input-group__prepend div.el-select .el-input__inner,
  .el-input-group__prepend div.el-select:hover .el-input__inner {
    border-color: transparent;
    background-color: white !important;
    color: #1890ff;
    border-top: 0;
    border-bottom: 0;
  }
  .el-input-group__append button.el-button:hover {
    border: 1px solid #1890ff !important;
  }
  //#1890FF
}

#col-12 {
  .el-form-item__label {
    text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>